<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">	
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../css/oksub.css">
	<script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
	<style type="text/css">
	.layui-form-item .layui-input-inline{
	 width:auto;
	}
	.layui-form-pane .layui-form-label{
	 width: 150px;
	}
	.layui-form-pane .layui-input-block{
	margin-left: 150px;
	}
	</style>
</head>
<body>
<div class="ok-body">
	<!--form表单-->
	<form class="layui-form layui-form-pane ok-form">
		<div class="layui-form-item">
			<label class="layui-form-label">名称</label>
			<div class="layui-input-block">
			   <select  id="UserId"  lay-filter="UserId"> </select>
			  </div>	
		</div>	
		<div class="layui-form-item">
			<label class="layui-form-label">加班日期</label>
			<div class="layui-input-block">	
				<input class="layui-input"  name="ATTEND_DATE" autocomplete="off" id="ATTEND_DATE">
			</div>	
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">加班开始时间</label>
			<div class="layui-input-inline">	
				 <select  class = "Hours"  id = "START_TIME_H" name = "START_TIME_H"> </select>
				</div>	 
				<div class="layui-input-inline">	
				 : 
				 </div>	
				 <div class="layui-input-inline">
				 <select class = "Min" id = "START_TIME_M" name = "START_TIME_M"> </select>
			</div>		
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">加班结束时间</label>
			<div class="layui-input-inline">	
				 <select class = "Hours"  id = "END_TIME_H" name = "END_TIME_H"> </select>
				</div>	 
				<div class="layui-input-inline">	
				 	 : 
				 </div>	
				 <div class="layui-input-inline">
				 <select class = "Min"  id = "END_TIME_M"  name = "END_TIME_M"> </select>
			</div>	
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">加班时数</label>
			<div class="layui-input-block">	
				<input class="layui-input"  name="HOURS" autocomplete="off" id="HOURS">
			</div>	
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">加班理由</label>
			<div class="layui-input-block">	
				<input class="layui-input"  name="REMARK" autocomplete="off" id="REMARK">
			</div>	
		</div>
		
	</form>
	
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script src="../../js/okform.js"></script>
<script>
     
    var ID = request("ID"); 
    var ManagerId = "";
    
    function AcceptClick() {
    	layui.use([ "okUtils"], function () {
    		let okUtils = layui.okUtils;
    		let $ = layui.jquery;
    		var saveCondition = {};
    		saveCondition['ID'] = ID;
    		saveCondition['UserId'] = $("#UserId").val();
    		saveCondition['ATTEND_DATE'] = $("#ATTEND_DATE").val();
    		
    		saveCondition['START_TIME'] = $("#START_TIME_H").val() + ":"+ $("#START_TIME_M").val();
    		saveCondition['END_TIME']   = $("#END_TIME_H").val() + ":"+ $("#END_TIME_M").val();
    		
    		saveCondition['HOURS'] = $("#HOURS").val();
    		saveCondition['REMARK'] = encodeURI( $("#REMARK").val().trim());
    		var searchcondition = JSON.stringify(saveCondition)
    		
    		okUtils.ajax("AttendancdOTTimeServlet?method=save", "get", {searchcondition: searchcondition}, true).done(function (response) {
				   console.log(response);
				  
				}).fail(function (error) {
					console.log(error)
				});
    	})
    
    }
    
    
	layui.use(["element", "form","jquery", "laydate", "okLayer", "okUtils", "okMock"], function () {
		let form = layui.form;
		let laydate = layui.laydate;
		let okLayer = layui.okLayer;
		let okUtils = layui.okUtils;
		let table = layui.table;
		let okMock = layui.okMock;
		let $ = layui.jquery;
		
		okLoading.close();		
		laydate.render({
            elem: '#ATTEND_DATE',
            type: "date"
           
        });
		var hourText = "<option value=''>请选择</option>";
		for(var i = 0 ; i < 25 ;i++){
			var text = "0";
			if(i < 10){
				text = "0"+ ""+ i;
			}else{
				text =  i;
			}
			hourText = hourText +"<option value='"+text+"'>"+text+"</option>";
		}
		 $(".Hours").html(hourText);
		 
			var minText = "<option value=''>请选择</option>";
			for(var i = 0 ; i < 60 ;i++){
				var text = "0";
				if(i < 10){
					text = "0"+ ""+ i;
				}else{
					text =  i;
				}
				minText = minText +"<option value='"+text+"'>"+text+"</option>";
			}
			 $(".Min").html(minText);
		  form.render();
		
		
		okUtils.ajax("UserServlet?method=getUserSelect", "get", null, true).done(function (response) {
			   var data =response.data;			 	
			  var txtconent = "<option value='0'>请选择</option>";
			  for(var i = 0; i < data.length; i ++){
				  txtconent = txtconent + "<option value='"+data[i].UserId+"'>"+data[i].Account + " "+data[i].RealName+"</option>"
			  }
			  $("#UserId").html(txtconent);
			  form.render();
			  if(ID){		 
					 okUtils.ajax("AttendancdOTTimeServlet?method=getOneData", "get", {ID: ID}, true).done(function (response) {
						   var data =response.data;									
						   $("#UserId").val(data.UserId);
						   $("#HOURS").val(data.HOURS);
						   $("#ATTEND_DATE").val(data.S_ATTEND_DATE);
						   $("#REMARK").val(data.REMARK);
						   var START_TIME = data.START_TIME;
						   $("#START_TIME_H").val(START_TIME.split(":")[0]);						  
						   $("#START_TIME_M").val(START_TIME.split(":")[1]);
						   
						   var END_TIME = data.END_TIME;
						   $("#END_TIME_H").val(END_TIME.split(":")[0]);						  
						   $("#END_TIME_M").val(END_TIME.split(":")[1]);
						   
						
						   form.render();
						}).fail(function (error) {
							console.log(error)
						});
				 }
			  
				
		}).fail(function (error) {
				console.log(error)
		});
			
	});
</script>
<!-- 行工具栏模板 -->
<script type="text/html" id="operationTpl">
	<a href="javascript:" title="编辑" lay-event="add"><i class="layui-icon">&#xe624;</i></a>
	<a href="javascript:" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
</script>
</body>
</html>
